/*
         * This CSS styles the loading overlay and the text animation.
         */
        
        /* The main container for the loading screen */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f0f4f8; /* Adjust to match your site's theme */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999; /* Ensure it's on top of all other content */
            opacity: 1;
            transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
            visibility: visible;
            font-family: Inter, sans-serif; /* Using a consistent font */
        }

        /* This class is added by JavaScript to fade out and hide the overlay */
        .loading-overlay.hidden {
            opacity: 0;
            visibility: hidden;
        }

        /* The animated text loader */
        @keyframes animate8345 {
            0%,100% {
                filter: hue-rotate(0deg);
            }
            50% {
                filter: hue-rotate(360deg);
            }
        }
        
        .loader {
            color: rgb(0, 0, 0);
            background: linear-gradient(to right, #2d60ec, #3ccfda);
            font-size: 30px;
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            animation: animate8345 9s linear infinite;
            font-weight: bold;
        }